<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <hr>

    <p>count 值：{{  count }}</p>
    <p>money 值：{{  money }}</p>
    <p>age 值：{{  age }}</p>
    <p>totalPrice 值：{{  totalPrice }}</p>
    <button @click="addCount(-5)" class="btn btn-warning">-5</button>
    <button @click="addCount(5)" class="btn btn-warning">+5</button>

    <button @click="reqCount(99)" class="btn btn-warning">请求-actions</button>
  </div>
</template>

<script>

// 导入
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  name: 'Right',
  // 用计算属性能简化对vuex的访问
  computed: {
    // count () {
    //   return this.$store.state.count
    // },
    // money () {
    //   return this.$store.state.money
    // },

    // vuex提供了mapState，它可以帮你生成类似于上面的计算属性来简化
    ...mapState(['count', 'money', 'age']),
    // 简化getters的访问
    ...mapGetters(['totalPrice'])
  },
  methods: {
    // addCount (num) {
    //   this.$store.commit('addCount', num)
    // }

    // 下面这句话相当于生成了上面的函数
    ...mapMutations(['addCount']),

    // reqCount(num) {
    //   this.$store.dispatch('reqCount', num)
    // }
    // 下面这句话相当于生产上面的函数
    ...mapActions(['reqCount'])
  }
}
</script>

<style>
</style>
